<template>
	<view class="home" :style="{paddingTop:top}">
		<view class="banner">
			<view class="icons">
				<image class="icon" src="../../static/icons/search.png" mode=""></image>
				<image class="icon" src="../../static/icons/cart.png" mode="" @tap="jumpCart"></image>
			</view>
			<swiper class="swiper" :indicator-dots="true" indicator-active-color="#d8d8d8">
			    <swiper-item v-for="item in swiperList" :key="item.id">
			        <image :src="item.pic" mode=""></image>
			    </swiper-item>
			</swiper>
		</view>
		<view class="cate">
			<view class="item" v-for="el in cateList" :key="el.id" @tap="jumpCate(el.id)">
				<image :src="el.icon" mode=""></image>
				<text>{{el.name}}</text>
			</view>
		</view>
		<!-- 限时活动 -->
		<view class="timeLimit">
			<image class="ico" src="/static/icons/notify.png" mode=""></image>
			<text class="text">限时活动:</text>
			<view class="hot-swiper">
				 <swiper class="swiper" :vertical="true" :autoplay="true" :interval="2000" :circular="true">
                        <swiper-item class="item" v-for="ele in timeList" :key="ele.recommendId" @tap="jumpGoodsDetail(ele.productId)">
								<view class="head">{{ele.name}}</view>
								<view class="b">
									<view>{{ele.price}}</view>
									<view>现价:{{ele.promotionPrice}}元</view>
								</view>
                        </swiper-item>
                    </swiper>
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="hot">
			<view class="title">热门推荐</view>
			<view class="hot-swiper">
				  <swiper class="swiper" :display-multiple-items="3" :autoplay="true" :interval="2000" :circular="true">
                        <swiper-item class="item" v-for="el in hotSwiper" :key="el.id" @tap="jumpGoodsDetail(el.id)">
							<image :src="el.pic" mode=""></image>
							<view>{{el.name}}</view>
                        </swiper-item>
                    </swiper>
			</view>
		</view>
		<!-- 新品推荐 -->
		<view class="new">
			<view class="title">新品推荐</view> 
			<scroll-view class="new-scroll" scroll-x="true">
                   <view class="list" :style="{width:num}">
						<view class="item" v-for="el in newList" :key="el.id" @tap="jumpGoodsDetail(el.id)">
							<view class="pic">
								<image :src="el.pic" mode=""></image>
							</view>
							<view class="info">
								<text>{{el.name}}</text>
								<text>价格: {{el.price}}</text>
							</view>
						</view>
                   </view>
                </scroll-view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="like">
			<view class="title">猜你喜欢</view> 
			<view class="list">
				<view class="item" v-for="el in likeList" :key="el.id" @tap="jumpGoodsDetail(el.id)">
					<view class="pic">
						<image :src="el.pic" mode=""></image>
					</view>
					<view class="info">
						<view class="cname">
							{{el.brandName}}
						</view>
						<view class="price">
							<text>¥{{el.price}}元</text>
							<text>乐居</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		bannerAds,
		categorys,
		recommendList,
		hotList,
		lejuLatestProducts,
		saleMostProducts
	} from "../../api/home/index.js"
	export default {
		data() {
			return {
				swiperList:[],
				cateList:[],
				timeList:[],
				hotSwiper:[],
				newList:[],
				likeList:[],
				num:3,
				top:0
			};
		},
		methods:{
			jumpCart() {
				uni.navigateTo({
					url:"/pages/home/cart/cart"
				})
			},
			jumpCate(id) {
				uni.navigateTo({
					url:`./cate/cate?id=${id}`
				})
			},
			jumpGoodsDetail(id) {
				uni.navigateTo({
					url:`./goodsDetail/goodsDetail?id=${id}`
				})
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			var val = uni.getMenuButtonBoundingClientRect()
			this.top = val.top + val.height + 5 + 'px';
			// #endif
			bannerAds().then(res=>{
				console.log(res)
				this.swiperList = res.data.items
			})
			categorys("1308336521604599809").then(res=>{
				console.log(res)
				this.cateList = res.data.category.children
			})
			recommendList().then(res=>{
				console.log(res)
				this.timeList = res.data.items
				console.log("我是",this.timeList)
			})
			hotList().then(res=>{
				this.hotSwiper = res.data.items
			})
			lejuLatestProducts().then(res=>{
				this.newList = res.data.productList
				this.num = 590 * (this.newList.length) + "rpx"
				console.log(this.num)
			})
			saleMostProducts().then(res=>{
				this.likeList = res.data.items
				console.log(this.likeList,"喜欢")
			})
		},
		onPullDownRefresh(){  ///  onPullDownRefresh 请求最新的数据
		// 当下拉完成或获取数据操作完成之后 需要手动的关闭下拉刷新 否则下拉状态会一直存在
			console.log("下拉刷新了");
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},2000)
		}
	}
</script>

<style lang="scss" scoped>
$color: #3e3e3e;
.home {
	background-color: #f1ece7;
}
.banner {
	position: relative;
	.icons {
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx;
		display: flex;
		justify-content: flex-end;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 26;
		.icon {
			width: 42rpx;
			height: 42rpx;
			&:nth-child(2) {
				margin-left: 46rpx;
			}
		}
	}
}
.swiper {
	width: 100%;
	height: 362rpx;
	overflow: hidden;
}
.swiper image {
	width: 100%;
}

.cate {
	display: flex;
	justify-content: space-around;
	margin: 60rpx 0;
	.item {
		display: flex;
		flex-direction: column;
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}

// 限时活动
.timeLimit {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 670rpx;
	height: 96rpx;
	margin: 40rpx auto;
	background-color: #FFFFFF;
	.ico {
		width: 48rpx;
		height: 48rpx;
		margin-left: 30rpx;
	}
	.text {
		width: 134rpx;
		height: 100%;
		text-align: right;
		color: #ffa500;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 96rpx;
	}
	.hot-swiper {
		width: 458rpx;
		height: 100%;
		.swiper {
			width: 100%;
			height: 100%;
			.item {
				display: flex;
				width: 100%;
				height: 100%;
				.head {
					width: 250rpx;
					height: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
					color: #3e3e3e;
					line-height: 96rpx;
					text-indent: 6rpx;
				}
				.b {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: calc(100% - 250rpx);
					height: 100%;
					view {
							
						&:first-child {
							font-size: 24rpx;
							color: #333333;
							text-decoration: line-through;
						}
						&:last-child {
							font-size: 24rpx;
							color: #f00;
						}
					}
				}
			}
		}
	}
}
// 热门推荐
.hot {
	padding: 0 30rpx;
	.title {
		font-size: 32rpx;
		color: #3e3e3e;
		font-weight: 700;
		padding: 30rpx 0;
	}
	.hot-swiper {
		width: 100%;
		height: 300rpx;
		.swiper {
			width: 100%;
			height: 100%;
			.item {
				width: 230rpx!important;
				height: 100%;
				margin: 0 20rpx;
				image {
					width: 208rpx;
					height: 176rpx;
				}
				view {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 26rpx;
					color: $color;
				}
			}
		}
	}
}
// 新品推荐
.new {
	padding: 0 30rpx;
	.title {
		font-size: 32rpx;
		color: #3e3e3e;
		font-weight: 700;
		padding: 30rpx 0;
	}
	.new-scroll{
		.list {
			display: flex;
			.item {
				display: flex;
				box-sizing: border-box;
				width: 590rpx;
				height: 260rpx;
				background-color: #fff;
				padding: 25px 0 25px 25px;
				border-radius: 20rpx;
				margin-right: 20rpx;
				.pic {
					width: 194rpx;
					height: 168rpx;
					border-radius: 6rpx;
					overflow: hidden;
					margin-right: 30rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					display: flex;
					flex-direction: column;
					width: 320rpx;
					height: 168rpx;
					justify-content: space-between;
					font-size: 26rpx;
					color: $color;
					text {
						&:first-child {
							text-overflow: -o-ellipsis-lastline;
							  overflow: hidden;
							  text-overflow: ellipsis;
							  display: -webkit-box;
							  -webkit-line-clamp: 2;
							  line-clamp: 2;
							  -webkit-box-orient: vertical;
						}
					}
				}
			}
		}
		
	}
}
// 猜你喜欢
.like {
	padding: 0 30rpx;
	.title {
		font-size: 32rpx;
		color: #3e3e3e;
		font-weight: 700;
		padding: 30rpx 0;
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		.item {
			width: 324rpx;
			height: 416rpx;
			background-color: #fff;
			border-radius: 0 0 8rpx 8rpx;
			margin: 10rpx 0;
			&:nth-child(odd) {
				margin-right: 40rpx;
			}
			.pic {
				width: 324rpx;
				height: 238rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 98rpx;
				padding: 18px;
				font-size: 26rpx;
				.cname {
					margin-top: 8rpx;
					color: $color;
				}
				.price {
					display: flex;
					justify-content: space-between;
					text {
						&:first-child {
							color: #000;
						}
						&:last-child {
							color: $color;
						}
					}
				}
			}
		}
	}
}
</style>
